<template>
	<view>
		<view class="gardendetail">
			<view class="header">
				<swiper class="swiper" @change="lunbo" circular :interval="interval" :duration="duration">
					<swiper-item v-for="(i, index) in detailFrom.slider_image" :key="i">
						<view class="swiper-item uni-bg-red"><image @click="imagePreview(index)" :src="i" mode="aspectFill"></image></view>
					</swiper-item>
				</swiper>
				<view class="dott">
					<view class="dot-lt">图片{{ lunboStyle }}/{{ detailFrom.slider_image.length }}</view>
				</view>
			</view>
		</view>

		<view class="content">
			<view class="active-experience">
				<view class="">{{ detailFrom.store_name }}</view>
				<view class="">
					<view class="nc-active">{{ detailFrom.keyword }}</view>
					<view class="">
						<image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/e6db820220923145428793.png" mode=""></image>
						<button open-type="share">123</button>
					</view>
				</view>
			</view>

			<view class="browse">
				<view class="">浏览人数{{ detailFrom.give_gold_num }} 收藏人数1</view>
			</view>

			<view class="servehome">
				<view class="">
					<image src="http://www.szzn.group/uploads/20221107/65bc1179141b9eefce96eb5e59a45f7a.png" mode=""></image>
					<view class="">DIY</view>
				</view>
			</view>

			<view class="list">
				<view class="list-title" v-for="item in detailFrom.specs" :key="item.id">
					<view class="">
						{{ item.sku }}
						<text class="sp-price">￥{{ item.price }}</text>
					</view>
					<view class="list-title-count">
						<view @click="countysjian(item)" class="letf">-</view>
						<view class="num">{{ item.cartNum }}</view>
						<view @click="countysjia(item)" class="right">+</view>
					</view>
				</view>
			</view>

			<view class="active-content">
				<view class="content-title">商品详情</view>
				<view class="content-text"><mp-html :content="detailFrom.description" /></view>
			</view>
		</view>
		<view class="fooder">
			<view class="">
				<view class="">咨询</view>
				<view class="" @click="submit">立即购买</view>
				<button open-type="contact">咨询</button>
			</view>
		</view>
	</view>
</template>

<script>
import { homeGardenIdDetail, homeSuerOrder, homeSubmit, homeShenchenOrder, updateShoppingCount } from '@/api/api.js';
export default {
	data() {
		return {
			detailId: '',
			detailFrom: {},
			shoppingId: [],
			interval: 3000,
			duration: 500,
			cartNum: 1,
			specs: [],
			orderKey: '',
			mark: '',
			lunboStyle: 1,
			arr: [],
			content: ''
		};
	},
	// 分享
	onShareAppMessage() {
		return {
			title: this.detailFrom.store_name,
			path: 'page_home/gardenhorticulturedetail/gardenhorticulturedetail?id=' + this.detailId
		};
	},
	// 分享到朋友圈
	onShareTimeline() {
		return {
			title: this.detailFrom.store_name,
			path: 'page_home/gardenhorticulturedetail/gardenhorticulturedetail?id=' + this.detailId
		};
	},
	onLoad(options) {
		uni.showLoading({})
		this.detailId = options.id;
		this.homeGardenIdDetail(this.detailId);
	},
	methods: {
		// 图片预览
		imagePreview(index) {
			this.detailFrom.slider_image.forEach(item => {
				this.arr.push(item);
			});
			uni.previewImage({
				current: index,
				urls: this.arr
			});
			this.arr = [];
		},

		homeGardenIdDetail(id) {
			let data = `id=${id}`;
			homeGardenIdDetail(data).then(res => {
				if (res.data.code == '200') {
					uni.hideLoading()
					this.detailFrom = res.data.data;
					this.detailFrom.specs.forEach(item => {
						item.cartNum = 0;
					});
				}else {
					uni.hideLoading()
				}
			});
		},
		//减少
		countysjian(item) {
			if (uni.getStorageSync('token') == '' || uni.getStorageSync('token') == null) {
				uni.showModal({
					title: '提示',
					content: '未登入,请先登入',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/page_login/index/index'
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return;
			}

			if (item.cartNum == 0) return;
			let that = this;
			for (let i = 0; i < that.detailFrom.specs.length; i++) {
				if (that.detailFrom.specs[i].id == item.id) {
					that.detailFrom.specs[i].cartNum = that.detailFrom.specs[i].cartNum - 1;
					that.cartNum = that.detailFrom.specs[i].cartNum;
					that.specs.push({
						cartNum: item.cartNum,
						spec_id: item.id
					});
					that.specs = JSON.stringify(that.specs);
					let data1 = {
						productId: that.detailId,
						specs: that.specs
					};
					homeSubmit(data1).then(res => {
						if (res.data.code == '200') {
							that.shoppingId = res.data.data.cartId[0];
							that.shoppingId = that.shoppingId + '';
							let data = `cartId=${that.shoppingId}&cartNum=${that.cartNum}`;
							updateShoppingCount(data).then(res => {});

							this.specs = JSON.parse(this.specs);
						}
					});
				}
			}
			this.$forceUpdate();
		},
		countysjia(item) {
			if (uni.getStorageSync('token') == '' || uni.getStorageSync('token') == null) {
				uni.showModal({
					title: '提示',
					content: '未登入,请先登入',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/page_login/index/index'
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return;
			}
			let that = this;
			for (let i = 0; i < that.detailFrom.specs.length; i++) {
				if (that.detailFrom.specs[i].id == item.id) {
					that.detailFrom.specs[i].cartNum = that.detailFrom.specs[i].cartNum + 1;
					this.cartNum = that.detailFrom.specs[i].cartNum;
					that.specs.push({
						cartNum: item.cartNum,
						spec_id: item.id
					});
					that.specs = JSON.stringify(that.specs);
					let data1 = {
						productId: that.detailId,
						specs: that.specs
					};
					homeSubmit(data1).then(res => {
						if (res.data.code == '200') {
							that.shoppingId = res.data.data.cartId[0];
							that.shoppingId = that.shoppingId + '';
							let data = `cartId=${that.shoppingId}&cartNum=${that.cartNum}`;
							updateShoppingCount(data).then(res => {});

							this.specs = JSON.parse(this.specs);
						}
					});
				}
			}
			this.$forceUpdate();
		},
		// 轮播变化
		lunbo(e) {
			this.lunboStyle = e.detail.current + 1;
		},
		// 立即购买
		submit() {
			this.specs = [];
			if (uni.getStorageSync('token') == '' || uni.getStorageSync('token') == null) {
				uni.showModal({
					title: '提示',
					content: '未登入,请先登入',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/page_login/index/index'
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return;
			}
			let that = this;
			let arr = [];
			this.detailFrom.specs.forEach(item => {
				if (item.cartNum == 0) {
					arr.push(item);
				} else {
					that.specs.push({
						cartNum: item.cartNum,
						spec_id: item.id
					});
				}
			});
			if (arr.length == this.detailFrom.specs.length) {
				uni.showToast({
					title: '请选择要购买的家具数量',
					duration: 1300,
					icon:'error'
				});
				return;
			}

			this.specs = JSON.stringify(this.specs);
			let data = {
				productId: this.detailId,
				specs: this.specs
			};
			homeSubmit(data).then(res => {
				if (res.data.code == '200') {
					this.shoppingId = res.data.data.cartId;
					this.specs = JSON.parse(this.specs);
					uni.navigateTo({
						url: '/page_home/guoshuorder/guoshuorder?cardId=' + this.shoppingId
					});
				} else {
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon:'error'
					});
				}
			});
		},
		// 支付
		pay(key) {
			let data = {
				special_id: 21,
				pay_type_num: 40,
				payType: 'weixin',
				from: 'weixin',
				useGold: false,
				key: key,
				mark: this.mark,
				price_id: 0,
				group_id: 4
			};
			homeShenchenOrder(data).then(res => {
				if (res.data.code == '200') {
					let obj = res.data.data.result.jsConfig;
					uni.requestPayment({
						provider: 'wxpay', // 服务提提供商
						appId: obj.appid,
						timeStamp: obj.timestamp, // 时间戳
						nonceStr: obj.nonceStr, // 随机字符串
						package: obj.package,
						signType: obj.signType, // 签名算法
						paySign: obj.paySign, // 签名
						success: function(red) {
							uni.reLaunch({
								url: '/page_shoppingcart/paysucceed/paysucceed?orderId=' + res.data.data.result.orderId
							});
						},
						fail: function(err) {
							uni.reLaunch({
								url: '/page_shoppingcart/orderdetail/orderdetail?orderId=' + res.data.data.result.orderId
							});
						}
					});
				} else {
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon:'error'
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.gardendetail {
	image {
		width: 100%;
	}
}
.header {
	position: relative;
}

.dott {
	position: absolute;
	bottom: 30rpx;
	left: 50%;
	transform: translateX(-50%);
	background-color: rgba(106, 156, 69, 0.6);
	font-size: 22rpx;
	padding: 12rpx 25rpx;
	border-radius: 50px;
	display: flex;
	color: #fff;
}
.swiper {
	height: 480rpx;
}

.swiper-item {
	display: block;
	height: 480rpx;
	line-height: 480rpx;
	text-align: right;
	position: relative;
}

.swiper-item > image {
	width: 100%;
	height: 100%;
	display: block;
}

.content {
	padding: 20rpx;

	.active-experience {
		image {
			width: 60rpx;
			height: 60rpx;
			vertical-align: middle;
		}

		display: flex;
		align-items: center;
		justify-content: start;

		> view:nth-child(1) {
			font-weight: 700;
			margin-right: 30rpx;
			font-size: 30rpx;
		}

		> view:nth-child(2) {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex: 1;

			> view:nth-child(1) {
				padding: 7rpx 12rpx;
				border-radius: 10rpx;
				background-color: #4eac60;
				color: #fff;
				font-size: 22rpx;
			}

			> view:nth-child(2) {
				position: relative;

				button {
					position: absolute;
					top: 0;
					right: 0;
					opacity: 0;
				}
			}
		}
	}

	.browse {
		padding: 30rpx 0;

		> view:nth-child(1) {
			font-size: 24rpx;
			color: #ccc;
		}
	}

	.servehome {
		> view:nth-child(1) {
			display: flex;
			align-items: center;
		}

		image {
			width: 150rpx;
			height: 60rpx;
			margin-top: 10rpx;
			margin-right: 30rpx;
			vertical-align: middle;
		}
	}

	.list {
		padding: 40rpx;
		margin-bottom: 20rpx;
		height: 300rpx;
		overflow-y: scroll;
		overflow-x: hidden;
		.list-title {
			padding: 15rpx 0;
			font-weight: 700;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;

			.list-title-count {
				display: flex;

				.letf {
					padding: 5rpx 20rpx;
					border-radius: 5rpx;
					background-color: #f5f5f5;
				}

				.num {
					margin: 0 20rpx;
					font-weight: normal;
				}

				.right {
					padding: 5rpx 18rpx;
					border-radius: 5rpx;
					background-color: #289958;
					color: #fff;
				}
			}
		}
	}
	.list::-webkit-scrollbar {
		display: none;
	}
}

.fooder {
	position: fixed;
	bottom: 0;
	height: 120rpx;
	width: 100%;
	background-color: #fff;
	font-size: 24rpx;

	button {
		// padding: 0 !important;
		margin: 0 !important;
		position: absolute;
		width: 220rpx;
		opacity: 0;
	}

	> view {
		padding: 0 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		> view:nth-child(1) {
			padding: 25rpx 80rpx;
			border-radius: 50px;
			background-color: #ebf2ed;
			color: #53c074;
		}

		> view:nth-child(2) {
			padding: 25rpx 100rpx;
			border-radius: 50px;
			background-color: #289958;
			color: #fff;
		}
	}
}

.nc-active {
	font-size: 26rpx;
}

.sp-price {
	display: inline-block;
	font-size: 28rpx;
	margin-left: 20rpx;
}
.active-content {
	margin-top: 20rpx;
	padding: 20rpx 0rpx 150rpx;
	background-color: #fff;
	// border-radius: 20rpx;
	// box-shadow: 1px 1px 8px 2px #ccc;
	.content-title {
		font-weight: 700;
		font-size: 30rpx;
	}
	.content-text {
		padding: 10rpx 0;
		// text-indent:64rpx;
		// line-height:1.6;
		font-size: 28rpx;
	}
}
</style>
